<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>AlphaAdmin</title>
    <link rel="stylesheet" type="text/css" href="../../assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/iconfont.css">
    <!-- select2.css -->
    <link rel="stylesheet" type="text/css" href="../../assets/libs/select2/select2.min.css">
    <!-- daterangepicker.css -->
    <link rel="stylesheet" type="text/css" href="../../assets/libs/daterangepicker/daterangepicker.css">
    <!-- bootstrap-datepicker.css -->
    <link rel="stylesheet" type="text/css" href="../../assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <!-- icheck.css -->
    <link rel="stylesheet" type="text/css" href="../../assets/libs/icheck/skins/all.css">
    <link rel="stylesheet" type="text/css" href="../../assets/css/style.css">
</head>

<body>
    <div class="skin-default" id="wrapper">
        <header class="navbar-header">
            <div class="brand">
                <a class="navbar-brand" href="../../index.html" title="AlphaAdmin">ALPHA</a>
            </div>
            <div class="navbar">
                <i class="sidebar-toggle iconfont icon-menu" data-toggle="push-menu" role="button">
                </i>
                <div class="navbar-menu pull-right">
                    <ul class="nav navbar-nav">
                        <li class="dropdown message">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="消息">
                                <i class="iconfont icon-email"></i>
                                <span class="badge">4</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">
                                    您有4条消息
                                </li>
                                <li class="body">
                                    <ul class="menu">
                                        <li>
                                            <a href="#" title="如何设置头部head...">
                                                <div class="pull-left">
                                                    <img class="img-circle" src="../../assets/avatars/avatars.png">
                                                </div>
                                                <h4 class="name">
                                                    匿名用户
                                                    <small class="pull-right">
                                                        <i class="iconfont icon-time"></i>
                                                        5分钟前
                                                    </small>
                                                </h4>
                                                <p class="content">
                                                    如何设置头部head的meta值
                                                </p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" title="如何设置头部head...">
                                                <div class="pull-left">
                                                    <img class="img-circle" src="../../assets/avatars/avatars.png">
                                                </div>
                                                <h4 class="name">
                                                    匿名用户
                                                    <small class="pull-right">
                                                        <i class="iconfont icon-time"></i>
                                                        5分钟前
                                                    </small>
                                                </h4>
                                                <p class="content">
                                                    如何设置头部head的meta值
                                                </p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" title="如何设置头部head...">
                                                <div class="pull-left">
                                                    <img class="img-circle" src="../../assets/avatars/avatars.png">
                                                </div>
                                                <h4 class="name">
                                                    匿名用户
                                                    <small class="pull-right">
                                                        <i class="iconfont icon-time"></i>
                                                        5分钟前
                                                    </small>
                                                </h4>
                                                <p class="content">
                                                    如何设置头部head的meta值
                                                </p>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" title="如何设置头部head...">
                                                <div class="pull-left">
                                                    <img class="img-circle" src="../../assets/avatars/avatars.png">
                                                </div>
                                                <h4 class="name">
                                                    匿名用户
                                                    <small class="pull-right">
                                                        <i class="iconfont icon-time"></i>
                                                        5分钟前
                                                    </small>
                                                </h4>
                                                <p class="content">
                                                    如何设置头部head的meta值
                                                </p>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="footer">
                                    <a href="#" title="查看所有消息">
                                        查看所有消息
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown notify">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="通知">
                                <i class="iconfont icon-bells"></i>
                                <span class="badge">7</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">
                                    您有7个通知
                                </li>
                                <li class="body">
                                    <ul class="menu">
                                        <li>
                                            <a class="text-danger" href="#" title="系统发生一个未知错误">
                                                <i class="iconfont icon-error pull-left"></i>
                                                <p class="content">发生一个系统路径错误</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="text-warning" href="#" title="系统发出一个警告">
                                                <i class="iconfont icon-alert pull-left"></i>
                                                <p class="content">为安全起见,请删除install文件夹</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="text-success" href="#" title="修改成功">
                                                <i class="iconfont icon-ok pull-left"></i>
                                                <p class="content">您更新了个人资料</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="text-info" href="#" title="新成员">
                                                <i class="iconfont icon-menu-user pull-left"></i>
                                                <p class="content">3位新成员</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a class="text-muted" href="#" title="点赞">
                                                <i class="iconfont icon-thumbs-up pull-left"></i>
                                                <p class="content">5个点赞</p>
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="footer">
                                    <a href="#" title="查看所有通知">
                                        查看所有通知
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown user">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="用户">Alpha</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a data-toggle="modal" data-target=".menu-setpassword" href="#" title="个人信息">
                                        <i class="iconfont icon-menu-user"></i>
                                        修改密码
                                    </a>
                                </li>
                                <li>
                                    <a href="#" title="系统设置">
                                        <i class="iconfont icon-setting"></i>
                                        系统设置
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a data-toggle="modal" data-target=".menu-logout" href="#" title="登出">
                                        <i class="iconfont icon-power"></i>
                                        登出
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <!-- 左侧导航 -->
        <aside class="main-sidebar">
            <div class="user-panel">
                <div class="image pull-left">
                    <img src="../../assets/avatars/avatars.png" alt="">
                </div>
                <div class="info pull-right">
                    <p class="title">Alpha</p>
                    <strong>超级管理员</strong>
                </div>
            </div>
            <section class="sidebar">
                <ul class="sidebar-menu" data-widget="tree">
                    <li>
                        <a href="../../index.html" title="仪表盘">
                            <i class="iconfont icon-dashborad"></i>
                            <small>仪表盘</small>
                        </a>
                    </li>
                    <li class="treeview">
                        <a href="#" title="图表">
                            <i class="iconfont icon-chart"></i>
                            <small>图表</small>
                            <span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li class="active">
                                <a href="../chart/chartjs.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>Chart.JS</small>
                                </a>
                            </li>
                            <li>
                                <a href="../chart/echartjs.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>EChart.JS</small>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="treeview active">
                        <a href="#" title="表单">
                            <i class="iconfont icon-form"></i>
                            <small>表单</small>
                            <span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li>
                                <a href="form.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>简单表单</small>
                                </a>
                            </li>
                            <li class="active">
                                <a href="advanced.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>高级表单</small>
                                </a>
                            </li>
                            <li>
                                <a href="editor.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>富文本</small>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#" title="UI元素">
                            <i class="iconfont icon-ui"></i>
                            <small>UI元素</small>
                            <span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li>
                                <a href="../ui/button.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>按钮</small>
                                </a>
                            </li>
                            <li>
                                <a href="../ui/icon.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>图标</small>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>其他</small>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="iconfont icon-table"></i>
                            <small>表格</small>
                            <span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li>
                                <a href="../table/table.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>简单表格</small>
                                </a>
                            </li>
                            <li>
                                <a href="../table/data.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>数据表格</small>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="iconfont icon-folder"></i>
                            <small>页面</small>
                            <span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li>
                                <a href="../page/login.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>登录页面</small>
                                </a>
                            </li>
                            <li>
                                <a href="../page/register.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>注册页面</small>
                                </a>
                            </li>
                            <li>
                                <a href="../page/404.html">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>404页面</small>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="iconfont icon-category"></i>
                            <small>多级菜单</small>
                            <span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
                        </a>
                        <ul class="treeview-menu">
                            <li class="treeview">
                                <a href="#">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>二级菜单</small>
                                    <span class=" pull-right">
                                        <i class="iconfont icon-menu-left-small"></i>
                                    </span>
                                </a>
                                <ul class="treeview-menu">
                                    <li class="treeview">
                                        <a href="#">
                                            <i class="iconfont icon-circle-hollow"></i>
                                            <small>三级菜单</small>
                                            <span class=" pull-right">
                                                <i class="iconfont icon-menu-left-small"></i>
                                            </span>
                                        </a>
                                        <ul class="treeview-menu">
                                            <li>
                                                <a href="#">
                                                    <i class="iconfont icon-circle-hollow"></i>
                                                    <small>四级菜单</small>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">
                                    <i class="iconfont icon-circle-hollow"></i>
                                    <small>二级菜单</small>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </section>
        </aside>
        <div class="page-wrapper">
            <div class="page-header">
                <h1 class="title">
                    表单
                    <small>高级表单</small>
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <a href="../../index.html" title="家">
                            <i class="iconfont icon-home"></i>
                            <small>家</small>
                        </a>
                    </li>
                    <li>
                        <small>
                            表单
                        </small>
                    </li>
                    <li class="active">
                        <small>高级表单</small>
                    </li>
                </ol>
            </div>
            <section class="page-body">
                <div class="row widget">
                    <section class="col-md-6 col-sm-12 col-xs-12">
                        <div class="box form">
                            <div class="box-header">
                                <h3 class="box-title">插件 Select2.js</h3>
                                
                            </div>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>多值选择框</label>
                                    <select class="form-control select2" name="states[]" multiple="multiple">
                                        <option selected="selected">orange</option>
                                        <option>white</option>
                                        <option selected="selected">purple</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>多值选择框</label>
                                    <select class="form-control select2" name="states[]">
                                        <option selected="selected">orange</option>
                                        <option>white</option>
                                        <option selected="selected">purple</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>多值选择框</label>
                                    <select class="form-control select2" name="states[]">
                                        <option value="one">orange</option>
                                        <option value="two" disabled="disabled">white</option>
                                        <option value="three">purple</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="box form">
                            <div class="box-header" >
                                <h3 class="box-title">插件 inputmask.js</h3>
                                
                            </div>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>日期(年-月-日)</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="iconfont icon-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" data-inputmask-alias="datetime" data-inputmask-inputformat="yyyy-mm-dd">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>手机号码</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="iconfont icon-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" data-inputmask-regex="0?(13|14|15|17|18|19)[0-9]{9}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>QQ号码</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="iconfont icon-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" data-inputmask-regex="[1-9]([0-9]{5,11})">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>IP地址</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="iconfont icon-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" data-inputmask="'alias': 'ip'">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>电子邮箱</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="iconfont icon-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" data-inputmask="'alias': 'email'">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box form">
                            <div class="box-header" >
                                <h3 class="box-title">插件 日期范围选取器(daterangepicker.js)</h3>
                                
                            </div>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>简单日期选择</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="iconfont icon-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" id="daterange">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>日期和时间范围</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="iconfont icon-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" id="daterange2">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>日期范围按钮</label>
                                    <div class="input-group">
                                        <button type="button" class="btn btn-default pull-right" id="daterange-btn">
                                            <span>
                                                <i class="fa fa-calendar"></i>日期范围选择器
                    
                                            </span>
                                            <i class="fa fa-caret-down"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <section class="col-md-6 col-sm-12 col-xs-12">
                        <div class="box form">
                            <div class="box-header" >
                                <h3 class="box-title">插件 日期选择器(bootstrap-datepicker.js)</h3>
                                
                            </div>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>简单日期选择</label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="iconfont icon-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" id="datepicker">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>日期和时间范围</label>
                                    <div class="input-group input-daterange">
                                        <input type="text" class="form-control" value="2017-04-05">
                                        <div class="input-group-addon">至</div>
                                        <input type="text" class="form-control" value="2018-04-19">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>日期内嵌</label>
                                    <div class="input-group">
                                        <div id="inline-datepicker" data-date="2018-04-05"></div>
                                        <input type="hidden" id="inline-datepicker-input">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box form">
                            <div class="box-header" >
                                <h3 class="box-title">插件 iCheck.js</h3>
                                
                            </div>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" class="minimal" checked>
                                    </label>
                                    <label>
                                        <input type="checkbox" class="minimal">
                                    </label>
                                    <label>
                                        <input type="checkbox" class="minimal" disabled> Minimal皮肤 复选框
                                    </label>
                                </div>
                                <div class="form-group">
                                    <label>
                                        <input type="radio" name="r1" class="minimal" checked>
                                    </label>
                                    <label>
                                        <input type="radio" name="r1" class="minimal">
                                    </label>
                                    <label>
                                        <input type="radio" name="r1" class="minimal" disabled> Minimal 皮肤 单选框
                                    </label>
                                </div>
                                <!-- Minimal 红色皮肤 -->
                                <!-- checkbox -->
                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" class="minimal-red" checked>
                                    </label>
                                    <label>
                                        <input type="checkbox" class="minimal-red">
                                    </label>
                                    <label>
                                        <input type="checkbox" class="minimal-red" disabled> Minimal 红色皮肤 复选框
                                    </label>
                                </div>
                                <!-- radio -->
                                <div class="form-group">
                                    <label>
                                        <input type="radio" name="r2" class="minimal-red" checked>
                                    </label>
                                    <label>
                                        <input type="radio" name="r2" class="minimal-red">
                                    </label>
                                    <label>
                                        <input type="radio" name="r2" class="minimal-red" disabled> Minimal 红色皮肤 单选框
                                    </label>
                                </div>
                                <!-- Minimal 红色皮肤 -->
                                <!-- checkbox -->
                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" class="flat-green" checked>
                                    </label>
                                    <label>
                                        <input type="checkbox" class="flat-green">
                                    </label>
                                    <label>
                                        <input type="checkbox" class="flat-green" disabled> Flat 绿色皮肤 复选框
                                    </label>
                                </div>
                                <!-- radio -->
                                <div class="form-group">
                                    <label>
                                        <input type="radio" name="r3" class="flat-green" checked>
                                    </label>
                                    <label>
                                        <input type="radio" name="r3" class="flat-green">
                                    </label>
                                    <label>
                                        <input type="radio" name="r3" class="flat-green" disabled> Flat 绿色皮肤 单选框
                                    </label>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </section>
        </div>
        <!-- 修改密码模态框 -->
        <div class="modal fade menu-setpassword" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">修改密码</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th>
                                        旧密码
                                    </th>
                                    <td>
                                        <input type="text" class="form-control" placeholder="请输入旧密码" name="js-oldPassword">
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        新密码
                                    </th>
                                    <td>
                                        <input type="text" class="form-control" placeholder="请输入新密码" name="js-newPassword">
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        确认密码
                                    </th>
                                    <td>
                                        <input type="text" class="form-control" placeholder="请再次输入新密码" name="js-verifyPassword">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 退出提示模态框 -->
        <div class="modal fade menu-logout" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">提示</h4>
                    </div>
                    <div class="modal-body">
                        <p>是否确定退出</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">登出</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../assets/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="../../assets/js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="../../assets/libs/tinymce/tinymce.min.js"></script>
    <script type="text/javascript" src="../../assets/js/Chart.min.js"></script>
    <!-- select2.js -->
    <script type="text/javascript" src="../../assets/libs/select2/select2.min.js"></script>
    <!-- inputmask.js -->
    <script type="text/javascript" src="../../assets/libs/inputmask/jquery.inputmask.bundle.min.js"></script>
    <!-- daterangepicker.js -->
    <script type="text/javascript" src="../../assets/libs/daterangepicker/moment.min.js"></script>
    <script type="text/javascript" src="../../assets/libs/daterangepicker/daterangepicker.js"></script>
    <!-- bootstrap datepicker -->
    <script type="text/javascript" src="../../assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="../../assets/libs/bootstrap-datepicker/bootstrap-datepicker.zh-CN.min.js"></script>
    <!-- icheck.js -->
    <script type="text/javascript" src="../../assets/libs/icheck/icheck.min.js"></script>
    <script type="text/javascript" src="../../assets/js/alpha.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.select2').select2()
        $(":input").inputmask()
        $('#daterange').daterangepicker({
            singleDatePicker: true,
            locale: {
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '起始时间',
                toLabel: '结束时间',
                customRangeLabel: '自定义',
                format: 'YYYY-MM-DD',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
            }
        })
        $('#daterange2').daterangepicker({
            timePicker: true,
            timePickerIncrement: 30,
            locale: {
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '起始时间',
                toLabel: '结束时间',
                customRangeLabel: '自定义',
                format: 'YYYY-MM-DD',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
            }
        })
        $('#daterange-btn').daterangepicker({
            ranges: {
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '过去7天': [moment().subtract(6, 'days'), moment()],
                '过去30天': [moment().subtract(29, 'days'), moment()],
                '这个月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            opens: "right",
            startDate: moment().subtract(29, 'days'),
            endDate: moment(),
            locale: {
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '起始时间',
                toLabel: '结束时间',
                customRangeLabel: '自定义',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                firstDay: 1
            }
        }, function(start, end) {
            var startTime = start.format('YYYY-MM-D')
            var endTime = end.format('YYYY-MM-D')
            var time = startTime + ' 至 ' + endTime
            if (start._isValid == false && end._isValid == false) {
                startTime = ""
                endTime = ""
                time = "请选择日期范围"
            }
            $('#daterange-btn span').html(time)
        })
        $('#datepicker').datepicker({
            language: 'zh-CN',
            autoclose: true,
            todayHighlight: true
        })
        $('.input-daterange input').each(function() {
            $(this).datepicker({
                language: 'zh-CN',
                autoclose: true,
                todayHighlight: true
            }, 'clearDates');
        });
        $('#inline-datepicker').datepicker({
            language: 'zh-CN',
            todayHighlight: true
        }).on('changeDate', function() {
            $('#inline-datepicker-input').val(
                $('#inline-datepicker').datepicker('getFormattedDate')
            );
        })


        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        })
        $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass: 'iradio_minimal-red'
        })
        $('input[type="checkbox"].flat-green, input[type="radio"].flat-green').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
        })
    })
    </script>
</body>

</html>